<!--
 * @Descripttion: 个人设置
 * @version: v1.0
 * @Author: baidongsheng
 * @Date: 2021-10-21 15:37:46
 * @LastEditors: Fu Zhuohang
 * @LastEditTime: 2022-03-11 16:57:21
-->
<template>
  <div class="motail-setting" v-if="isShow">
    <div class="motail-content">
      <div class="motail-top">
        <div class="motail-top-title">{{ $t('languages.common.personalSetting') }}</div>
        <div class="motail-close" @click="close">
          <i class="icon aufontAll h-icon-all-close"></i>
        </div>
      </div>

      <div class="motail-bottom">
        <div class="motail-content-left">
          <div
            class="motail-left-li"
            v-for="item in list"
            :key="item.lable"
            :class="item.label === current ? 'active' : ''"
            @click="current = item.label">
              {{ item.label ==='info'? $t("languages.common.personalInfo"):$t("languages.common.passwordSetting")}}
          </div>
        </div>

        <div class="motail-content-right">
          <div class="motail-right-info" v-show="current === 'info'">
            <div
              class="info-li"
              v-for="val in userInfoList"
              :key="val.title"
              :class="val.type ? 'info-li-active' : ''"
            >
              <div class="sub-title" v-if="val.title">{{ val.title }}</div>
              <div class="image-author" v-if="val.type === 'image'">
                <img
                  v-if="val.value && val.value.includes('http')"
                  :src="val.value"
                />
                <img v-else-if="val.value" :src="getDownloadUrlNew(val.value)" />
                <i
                  v-else
                  class="icon aufontAll h-icon-all-normal_smile default-avatar"
                ></i>
              </div>

              <span v-else>{{ val.value || "-" }}</span>
            </div>
          </div>

          <div class="motail-right-password" v-show="current === 'password'">
            <a-form-model
              ref="ruleForm"
              :model="ruleForm"
              layout="vertical"
              labelAlign="left"
              :rules="rules"
            >
              <a-form-model-item class="oldPwd" has-feedback :label="$t('languages.common.oldPwd')" prop="oldPwd">
                <a-input
                  v-model="ruleForm.oldPwd"
                  type="password"
                  autocomplete="off"
                  :placeholder="$t('languages.common.placeholder')"
                />
              </a-form-model-item>
              <a-form-model-item has-feedback :label="$t('languages.common.newPwd')" prop="newPwd">
                <a-input
                  v-model="ruleForm.newPwd"
                  type="password"
                  autocomplete="off"
                  :placeholder="$t('languages.common.placeholder')"
                  @change="newPwdChange"
                />
              </a-form-model-item>
              <a-form-model-item class="surePwd" :class="hasDiff ? 'has-error' : ''" has-feedback :label="$t('languages.common.surePwd')" prop="surePwd">
                <a-input
                  v-model="ruleForm.surePwd"
                  type="password"
                  autocomplete="off"
                  :placeholder="$t('languages.common.placeholder')"
                  @change="surePwdChange"
                />
                <span v-if="hasDiff" class="error-icon">
                  <a-icon type="close-circle" theme="filled" />
                </span>
                <div class="ant-form-explain" v-if="hasDiff">{{$t('languages.common.passwordErrorTips6')}}</div>
              </a-form-model-item>
            </a-form-model>

            <div class="foot-btn">
              <a-button style="margin-left: 10px" @click="resetForm">
                {{ $t('languages.common.reset') }}
              </a-button>
              <a-button type="primary" @click="submitForm"> {{ $t('languages.common.ok') }} </a-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { Button, FormModel, Input, Icon } from "@h3/antd-vue";
import OAuthApi from "@/apis/oauth";
import getDownloadUrlNew from '@cloudpivot/common/src/utils/getDownloadUrlNew';
import common from '@cloudpivot/common';
@Component({
  name: "my-setting",
  components: {
    AButton: Button,
    AFormModel: FormModel,
    AFormModelItem: FormModel.Item,
    AInput: Input,
    AIcon: Icon,
  },
})
export default class MySetting extends Vue {
  @Prop({ default: false }) isShow!: boolean;

  @Prop({ default: {} }) userInfo!: any;

  current: string = "info";

  list: any[] = [
    {
      title: "个人信息",
      label: "info",
    },
    {
      title: "密码设置",
      label: "password",
    },
  ];

  userInfoList: any[] = [];

  ruleForm: any = {
    oldPwd: "",
    newPwd: "",
    surePwd: "",
  };

  rules: any = {};

  get apiHost() {
    return (window as any).config.apiHost;
  }

  get token(){
    return window.localStorage.getItem('token');
  }

  @Watch("isShow")
  getUserInfo(val) {
    if (!val) return;
    this.current = "info";
    if (!this.userInfo.isShowUpdatePwdBtn) {
      this.list = this.list.filter((item) => item.label !== "password");
    }
    
    this.userInfoList = [
      {
        title: "",
        value: this.userInfo.imgUrl || this.userInfo.imgUrlId,
        type: "image",
      },
      {
        title: this.$t("languages.common.userInfo.name"),
        value: this.userInfo.name,
      },
      {
        title: this.$t("languages.common.userInfo.id"),
        value: this.userInfo.userId,
      },
      {
        title: this.$t("languages.common.userInfo.departmentName"),
        value: this.userInfo.departmentName,
      },
      {
        title: this.$t("languages.common.userInfo.appellation"),
        value: this.userInfo.appellation,
      },
      {
        title: this.$t("languages.common.userInfo.employeeNo"),
        value: this.userInfo.employeeNo,
      },
      {
        title: this.$t("languages.common.userInfo.roleName"),
        value: this.userInfo.roleName,
      },
      {
        title: this.$t("languages.common.userInfo.email"),
        value: this.userInfo.email,
      },
      {
        title: this.$t("languages.common.userInfo.remark"),
        value: this.userInfo.remark,
      },
    ];
  }

  getDownloadUrlNew(refId: string) {
    return getDownloadUrlNew.getImageUrl(refId);
  }

  beforeMount() {
    this.setRules();
  }

  oldPwd(rule, value, callback) {
    if (value === "") {
      callback(new Error(`${this.$t('languages.common.passwordErrorTips1')}`));
    } else if(/[\u4e00-\u9fa5\s]/.test(value)){
      callback("密码中不能包含汉字和空格")
    } else {
      callback();
    }
  }

  newPwd(rule, value, callback) {
    if (value === "") {
      callback(new Error(`${this.$t('languages.common.passwordErrorTips2')}`));
    } else if(/[\u4e00-\u9fa5\s]/.test(value)){
      callback("密码中不能包含汉字和空格")
    } else if (value.length < 6 || value.length > 14 || !(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[^\u4e00-\u9fa5\s]{6,14}$/.test(value))) {
      callback(new Error(`${this.$t('languages.common.passwordErrorTips3')}`))
    } else if (value === this.ruleForm.oldPwd) {
      callback(new Error(`${this.$t('languages.common.passwordErrorTips4')}`))
    } else {
      callback();
    }
  }

  hasDiff:boolean = false;

  newPwdChange(){
    if(this.ruleForm.surePwd && this.ruleForm.newPwd !== this.ruleForm.surePwd){
      this.hasDiff = true;
    } else {
      this.hasDiff = false;
    }
  }

  surePwd(rule, value, callback) {
    if (value === "") {
      callback(new Error(`${this.$t('languages.common.passwordErrorTips5')}`));
    } else {
      callback();
    }
  }

  surePwdChange(){
    if(this.ruleForm.surePwd && this.ruleForm.newPwd !== this.ruleForm.surePwd){
      this.hasDiff = true;
    } else {
      this.hasDiff = false;
    }
  }

  /**
   * 自定义验证规则
   */
  setRules() {
    this.rules = {
      oldPwd: [{ validator: this.oldPwd, trigger: "change" }],
      newPwd: [{ validator: this.newPwd, trigger: "change" }],
      surePwd: [{ validator: this.surePwd, trigger: "change" }],
    };
  }

  /**
   * 修改密码
   */
  submitForm() {
    const ruleForm: any = this.$refs["ruleForm"];
    ruleForm.validate(async (valid) => {
      if (valid) {// rsa加密
        const result = await OAuthApi.getRsaKey();
        const flag:boolean = typeof result === 'object' && result.hasOwnProperty('index') && result.hasOwnProperty('key');
        if (!flag) {
        return;
        }
        const { index, key } = result;
        const oldPassword:any = common.utils.RsaEncrypt(this.ruleForm.oldPwd, key);
        const newPassword:any = common.utils.RsaEncrypt(this.ruleForm.newPwd, key);
        // rsa加密结束
        const params = {
          index,
          oldPassword,
          newPassword,
        };
        const res = await OAuthApi.changePassword(params);
        if (res.errcode) {
          this.$message.error(res.errmsg);
          return;
        }
        this.$message.success(`${this.$t("languages.common.changePwdSuccess")}`);
        this.$emit('success');
      }
    });
  }

  /**
   * 重置表单
   */

  resetForm() {
    const ruleForm: any = this.$refs["ruleForm"];
    ruleForm.resetFields();
  }

  close() {
    this.resetForm();
    this.$emit("closepop");
  }
}
</script>
<style lang='less' scoped>
@import '~@cloudpivot/application/src/components/pc/style/custom-themes';
.motail-setting {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.45);
  .motail-content {
    width: 800px;
    height: auto;
    overflow: auto;
    min-height: 520px;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    > .motail-top {
      width: 100%;
      height: 72px;
      box-shadow: 0px 1px 0px 0px #dddddd;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px;
      box-sizing: border-box;
      > .motail-top-title {
        font-size: 16px;
        color: #111218;
        font-weight: 600;
        height: 24px;
        line-height: 24px;
      }
      .motail-close {
        color: rgba(17, 18, 24, 0.5);
        font-size: 18px;
        cursor: pointer;
        height: 24px;
        line-height: 24px;
        &:hover{
          color: @highlightColor;
        }
      }
    }

    > .motail-bottom {
      display: flex;
      height: calc(100% - 56px);
      > .motail-content-left {
        width: 160px;
        height: 100%;
        min-height: 450px;
        border-right: 1px solid #ddd;
        padding-top: 10px;
        > .motail-left-li {
          width: 100%;
          padding-left: 24px;
          font-size: 14px;
          font-weight: 400;
          color: #111218;
          height: 40px;
          line-height: 40px;
          cursor: pointer;
          &:hover{
            color: @highlightColor;
          }
          &.active {
            background-color: @activeBGColor;
            font-weight: 700;
            color: @highlightColor;
          }
          &:hover{
            background-color: @activeBGColor;
          }
        }
      }
      > .motail-content-right {
        flex: 1;
        > .motail-right-info {
          width: 100%;
          padding: 24px;
          display: flex;
          flex-wrap: wrap;
          .info-li {
            width: 48%;
            margin-bottom: 16px;
            &:nth-child(2n) {
              margin-right: 16px;
            }
            &.info-li-active {
              width: 200%;
            }
            > .sub-title {
              width: 100%;
              font-size: 14px;
              font-weight: 400;
              color: #111218;
              margin-bottom: 6px;
            }
            > span {
              display: block;
              width: 288px;
              background-color: #f1f2f6;
              border-radius: 2px;
              padding: 0 12px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              height: 32px;
              line-height: 32px;
              font-size: 14px;
              color: #111218;
              font-weight: 400;
              text-align: justify;
            }
            img {
              width: 68px;
              height: 68px;
              border-radius: 50% !important;
              border: 1px solid #DDDDDD;
              object-fit: cover;
            }
            .default-avatar {
              font-size: 68px;
              line-height: 68px;
              color: #ffb131;
            }
          }
        }
        > .motail-right-password {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          .ant-form {
            width: 100%;
            padding-left: 25px;
            padding-top: 25px;
            flex: 1;
            .ant-form-item {
              width: 320px;
              margin-bottom: 8px;
              /deep/.ant-form-item-label > label {
                height: 22px;
                font-size: 14px;
                font-weight: 400;
                color: #111218;
                line-height: 22px;
              }
              /deep/.ant-form-item-control .ant-input{
                border-radius: 2px;
              }
            }
          }
          .foot-btn {
            width: 100%;
            height: 56px;
            border-top: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0 25px;
            .ant-btn {
              margin-left: 10px;
              min-width: 80px;
              height: 32px;
              border-radius: 2px;
              line-height: 32px;
              padding: 0 16px;
            }
          }
        }
      }
    }
  }
}
.oldPwd{
  /deep/.has-success.has-feedback{
    span.ant-form-item-children-icon{
      display: none;
    }
  }
}
.surePwd.has-error{
  /deep/.has-feedback{
    .ant-input{

    }
    span.ant-form-item-children-icon{
      display: none;
    }
  }
  /deep/.ant-form-item-control .error-icon{
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    width: 32px;
    height: 20px;
    margin-top: -10px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    visibility: visible;
    pointer-events: none;
    color: #F4454E;
    animation-name: diffZoomIn2;
  }
}
</style>